<template>
  <div class="flight-board">
    <el-container>
      <el-aside width="700px">
        <el-row>
          <img id="small-logo" src="@/assets/img/logo.png" />
          <div>
            BUAA航空 | {{ flightInfo.flightId }} | {{ flightInfo.planeModel }}
          </div>
        </el-row>
        <el-row>
          <div class="time">
            <span>
              {{
                flightInfo.departureTime.getHours() +
                  ':' +
                  (flightInfo.departureTime.getMinutes() < 10
                    ? '0' + flightInfo.departureTime.getMinutes()
                    : flightInfo.departureTime.getMinutes())
              }}
            </span>
            <span>
              {{
                flightInfo.arrivalTime.getHours() +
                  ':' +
                  (flightInfo.arrivalTime.getMinutes() < 10
                    ? '0' + flightInfo.arrivalTime.getMinutes()
                    : flightInfo.arrivalTime.getMinutes())
              }}
            </span>
          </div> </el-row
        ><el-row>
          <div class="airport">
            <span>
              {{ flightInfo.departureAirport }}
            </span>
            <span style="background-color:transparent">
              <img id="small-line" src="@/assets/img/to.png" />
            </span>
            <span>
              {{ flightInfo.arrivalAirport }}
            </span>
          </div>
        </el-row>
        <el-row>
          <div class="duration">
            {{ flightInfo.duration }}
          </div>
        </el-row>
      </el-aside>
      <el-main>
        <el-row>
          <div class="class-picker" @click="show2">
            <div>头等舱</div>
            <div>
              ¥
              <span>
                {{ flightInfo.firstPrice + flightInfo.constructionCost }}
              </span>
              起
            </div>
          </div>
          <div
            class="class-picker"
            @click="show1"
            style="border-right:1px solid #324c70"
          >
            <div>经济舱</div>
            <div>
              ¥
              <span>
                {{ flightInfo.economyPrice + flightInfo.constructionCost }}
              </span>
              起
            </div>
          </div>
        </el-row>
      </el-main>
    </el-container>
    <transition name="top" mode="out-in">
      <div class="isDown" v-show="isShow">
        <transition mode="out-in">
          <div v-if="isShow == 1">
            <price-board
              type="折扣经济舱"
              :allowance="flightInfo.baggageAllowance"
              discount="4.2"
              :price="flightInfo.economyPrice + flightInfo.constructionCost"
              :num="flightInfo.economyNum"
              @buy="buy"
            ></price-board>
            <price-board
              type="标准公务舱"
              :allowance="flightInfo.baggageAllowance"
              discount="5.2"
              :price="flightInfo.businessPrice + flightInfo.constructionCost"
              :num="flightInfo.businessNum"
              @buy="buy"
            ></price-board>
          </div>
        </transition>
        <transition mode="out-in">
          <div v-if="isShow == 2">
            <price-board
              type="尊享头等舱"
              :allowance="flightInfo.baggageAllowance"
              discount="4.8"
              :price="flightInfo.firstPrice + flightInfo.constructionCost"
              :num="flightInfo.firstNum"
              @buy="buy"
            ></price-board>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRef } from 'vue';
import { useStore } from 'vuex';

import PriceBoard from '../components/PriceBoard.vue';

export default defineComponent({
  name: 'FlightBoard',
  components: {
    PriceBoard,
  },
  props: {
    flightInfo: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const store = useStore();
    console.log(store.state.ticketInfo);
    const isShow = ref(0);
    const show1 = () => {
      isShow.value = isShow.value === 1 ? 0 : 1;
    };
    const show2 = () => {
      isShow.value = isShow.value === 2 ? 0 : 2;
    };
    const buy = (info: { type: String; price: Number }) => {
      store.commit('updateTicketInfo', {
        flightId: props.flightInfo.flightId,
        departureDate: props.flightInfo.departureDate,
        ticketType: info.type,
        price: info.price,
        pAmount: store.state.formData.pAmount,
      });
    };
    return {
      isShow,
      show1,
      show2,
      buy,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
$height: 155px;
$width: 1000px;
.flight-board {
  margin: 0 auto;
  width: $width;
  min-height: $height;
  font-size: 15px;
  color: #5a6574;

  .el-container {
    background: #ffffff;
    box-shadow: 3px 3px 7px #b4b4b4, -3px -3px 6px #ffffff;
    .el-aside {
      padding-top: 5px;
      padding-left: 10px;
      height: $height;
      overflow: hidden;
      .el-row {
        height: 25px;
        line-height: 25px;
        // border: 1px solid #999;
        .time {
          margin: 0 auto;
          font-size: 30px;
          color: $themeLight;
          span {
            margin: 81px;
          }
        }
        .airport {
          margin: 0 auto;
          margin-bottom: 12px;
          span {
            width: 110px;
            background-color: lighten($themeLight, 5%);
            color: white;
            border-radius: 5px;
            margin: 0 5px 0;
            float: left;
          }
        }
        .duration {
          margin: 0 auto;
        }
      }
    }
    .el-main {
      max-height: $height;
      margin: 0;
      padding: 0;
      .el-row {
        margin-top: 0;
        display: block;
        .class-picker {
          cursor: pointer;
          float: right;
          // margin-left: 10px;
          background-color: darken($themeLight, 5%);
          width: 100px;
          height: $height;
          line-height: 35px;
          color: white;
          font-size: 12px;
          div {
            height: 62px;
          }
          span {
            font-size: 20px;
          }
        }
      }
    }
  }
}
#small-logo {
  width: 30px;
  // height: 30px;
  margin-top: -3px;
  margin-right: 3px;
}
#small-line {
  width: 40px;
  height: 30px;
  margin-left: -5px;
}

.isDown {
  float: left;
  width: $width;
  min-height: $height;
  line-height: $height;
}

.top-enter-from,
.top-leave-to {
  transform: translate3d(0, -5%, 0);
}
.top-enter-active,
.top-leave-active {
  transition: all 0.4s ease;
}
</style>
